<template>
  <div id="loginRegister">
    <div class="login" v-show="isLogin">
        <component is="Login" @changeForm="changeForm"></component>
    </div>
    <div class="register" v-show="!isLogin">
      <component is="Register" @changeForm="changeForm"></component>
    </div>
  </div>
</template>

<script>

  import Register from '../components/Register.vue'
  import Login from '../components/Login.vue'

  export default {
    name: 'loginRegister',
    components: {
      Register,
      Login
    },
    data () {
      return {
        isLogin: true
      }
    },
    methods: {
      changeForm () {
        this.isLogin = !this.isLogin
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  #loginRegister {
    display: flex
    justify-content center
    height: 100vh
    background: url('../assets/dev.jpg') no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    opacity .9;
    padding-top: 50px
  }

</style>
